<template>
<div>
    <Row justify="center" style="padding-top:8%">
        <h2>{{userName}}</h2>
    </Row>
    <Row justify="space-around" style="padding-top:8%">
        <Card id="mianShiGuan" style="width:320px">
            <div @click="interviewer" style="text-align:center">
                <img id="img_g" src="../assets/user_g.jpg">
                <h3>我是面试官</h3>
            </div>
        </Card>

        <Card id="mianShiZhe" style="width:320px">
            <div @click="jobSeeker" style="text-align:center">
                <img id="img_z" src="../assets/user_z.jpg">
                <h3>我是面试者</h3>
            </div>
        </Card>
    </Row>
</div>
    
</template>

<script>
    export default {
        name:'User',
        data() {
            return {
                userName:"Bret"
            }
        },
        methods: {
            getUserName:function() {
                const res = fetch('api/v1/user',{method: 'get'}).then((res) =>
                    res.json().then((res) => {
                    
                    this.userName = res[0];
                }))
            },
            jobSeeker:function() {
                this.$router.push('/Interviewee')
            },
            interviewer:function() {
                this.$router.push('/Interviewer')
            }
        },
        mounted() {
            this.getUserName();
        }

    }
</script>

<style>
#img_g {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    border: 2px solid rgb(51, 153, 255);
}

#img_z {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    border: 2px solid rgb(51, 153, 255);
}

#mianShiGuan:hover {
    cursor:pointer;
}

#mianShiZhe:hover {
    cursor:pointer;
}

</style>